<template>
	<view class="s-page-wrapper">
		<view class="index-goods" v-if="loadGoods">
			<view class="swiper" v-if="goods.mainImages.length > 0">
				<swiper
					class="swiper-container"
					:autoplay="true"
					:interval="4000"
					:circular="true"
					:indicator-dots="true"
					indicator-active-color="#FC3F78"
					indicator-color="#cccccc"
				>
					<block v-for="item in goods.mainImages" :key="item">
						<swiper-item class="swiper-wrapper">
							<image lazy-load :src="item" mode="scaleToFill" class="is-response" style="width: 100%;height: 100%;"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view class="goods_info">
				<view class="title">
					<text>{{ goods.userType }}</text>
					{{ goods.title }}
				</view>
				<view class="coupon-price s-row">
					<view class="price">
						券后价￥
						<text>{{ goods.itemfeeFinal }}</text>
					</view>
					<view class="volume">已售{{ goods.volume }}件</view>
				</view>
				<view class="coupon-price s-row">
					<view class="yprice">
						原价￥
						<text>{{ goods.itemfee }}</text>
					</view>
					<view class="tag-list">
						<view class="tag">
							<text class="iconfont icon-detail_icon_gou"></text>
							包邮
						</view>
						<view class="tag">
							<text class="iconfont icon-detail_icon_gou"></text>
							运费险
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="goods_quan s-row">
				<view class="row getGoodsLink" >
					<view class="is-col-16 money" >
						<view>
							<text>{{goods.itemfeeCoupon}}</text>
							元优惠券
						</view>
						<view class="date-coupon">使用期限:{{goods.couponStartTime}}至{{goods.couponEndTime}}</view>
					</view>
					<view class="is-col-8 name" @tap="shopCartShare('tklbuy')"><text style="font-size: 20px; line-height: 20px;">立即领券</text></view>
				</view>
				<image lazy-load src="../../static/img/goods/goods_quan.png" mode="widthFix" class="is-response" ></image>
			</view>
			
			<view class="goods_desc">{{ goods.jianjie }}</view>
			
			<view class="hr10"></view>
			
			<view class="goods_shop">
				<view class="info" style="border-radius: 60upx;">
					<image lazy-load :src='goods.shopIcon'  mode="widthFix" class="is-response" ></image>
					<view class="shop-text">
						<view class="shop-title">{{goods.shopTitle}}</view>
						<view class="col-main"><text class="iconfont icon-taobao"></text></view>
						<navigator class="shop-new" url="/pages/cate/index" open-type="switchTab" hover-class="">
							{{goods.provcity}}
							<text class="iconfont icon-youjiantou"></text>
						</navigator>
					</view>
				</view>
				<view class="goods-tab s-row">
					<view class="is-col-8">
						宝贝描述:{{goods.score1}}
						<text class="iconfont icon-ping lv_p"></text>
					</view>
					<view class="is-col-8">
						卖家服务:{{goods.score2}}
						<text class="iconfont icon-di lv_d"></text>
					</view>
					<view class="is-col-8">
						物流服务:{{goods.score3}}
						<text class="iconfont icon-gao lv_g"></text>
					</view>
				</view>
			</view>
			
			<view class="hr10"></view>
			
			<view class="goods_reco">
				<view class="goods-info-title">宝贝详情</view>
				<view class="imglist"  v-if="goods.content.length > 0">
					<block  v-for="(item,index) in goods.content" :key="index">
						<image lazy-load :src="item" mode="widthFix" style="width: 100%;" class="is-response"></image>
					</block>
				</view>
			</view>
			<!-- 购买按钮 -->
			<view class="goods_shop_cart">
				<view class="cent s-row">
					<!-- <view class="is-col-4 is-center but" @tap="showShopCartBg('cart')">
						<view class="img">
							<image src="http://cmsstatic.dataoke.com//wap_new/main/images/detail_tab_share.svg?v=201902151532"></image>
						</view>
						分享
					</view>
					<view class="is-col-4 is-center but">
						<view class="img">
							<text class="iconfont icon-shoucang"></text>
						</view>
						收藏
					</view> -->
					<view class="is-col-16">
						<view class="btn s-row">
							<view class="is-col-10 tkl"  style="width: 50%;" @tap="showShopCartBg('cart')">口令购买</view>
							<view class="is-col-14 coupon-buy" style="width: 50%;" @tap="shopCartShare('tklbuy')">领券购买</view>
						</view>
					</view>
				</view>	
			</view>
			
			<!-- 购买按钮 active-->
			<view v-if="shopCartBg" class="goods_shop_cart_bg" @tap="showShopCartBg('cart')" @touchmove.stop.prevent="moveHandleStop"></view>
			<view class="goods_share" v-bind:class="[shopCartBg ? 'active' : '','']" style="height: 200upx;">
				<view class="cent">
					<view class="" @tap="shopCartShare('tkl')" style="height: 100upx;">
						<text class="iconfont icon-kouling"></text>通过口令分享
					</view>
					<view class="" @tap="shopCartShare('picture')">
						<text class="iconfont icon-tupian"></text>通过图片分享
					</view>
					<text class="em"></text>
				</view>
			</view>
			
			<!-- 悬浮上拉 -->
			<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '','']" style="bottom: 56px;">
				<text class="iconfont icon-shangla"></text>
			</view>

			<view class="navBarButtonBox">
				<!-- 顶部右侧菜单 -->
				<view v-if="navBarButton" class="goods_shop_cart_bg navBarButton" @tap="showShopCartBg('nav')" @touchmove.stop.prevent="moveHandleStop"></view>
				<view class="h_newlit" v-bind:class="[navBarButton ? 'active' : '','']">
					<view class="em">
						<view class="" @tap="navBarButtontO('home')">
							<text class="iconfont icon-shouye"></text>首页
						</view>
						<view class="" @tap="navBarButtontO('search')">
							<text class="iconfont icon-sousuo"></text>搜索
						</view>
						<view class="" @tap="navBarButtontO('kefu')">
							<text class="iconfont icon-kefu-"></text>客服
						</view>
						<view class="" @tap="navBarButtontO('member')">
							<text class="iconfont icon-wode"></text>我的
						</view>
					</view>
				</view>
			</view>
			<!-- 顶部右侧菜单 -->
			
			<!-- 淘口令分享 -->
			<simpleModal ref="simpleModalTkl" @maskClose="TklmaskClose" >
				<view class="buy-box-title">复制分享文案</view>
				<view class="buy-box-center">
					<view class="code-cent">
						<div class="cente-text">
							<div>
								<view class="textarea">{{goods.title}}<br>【原价】{{goods.itemfee}}元<br>【券后】{{goods.itemfeeFinal}}元<br>【复制此信息打开手机淘宝即可查看并下单】{{tkl}}<br>{{goods.jianjie}}</view>
							</div>
						</div>
						<view class="closeTips">点击非内容区域关闭弹窗~</view>
					</view>
					<view class="buy-btn-copy" v-bind:class="[copyTklStatus ? 'active' : '','']" @tap="copyTklWenAn">{{copyTklStatus?"复制成功":"一键复制"}}</view>
				</view>
			</simpleModal> 
			<!-- 淘口令分享 -->
			
			<!-- 淘口令购买 -->
			<simpleModal ref="simpleModalTklBuy" @maskClose="TklBuymaskClose">
				<view class="buy-box-center">
					<view class="code-cent" style="margin-top: 10px;">
						<div class="cente-text" style="height: auto;">
							<div>
								<view class="textarea" style="height: auto;">复制框内整段文字，打开【手淘APP】即可领券购买。{{tkl}}</view>
							</div>
						</div>
					</view>
					<view class="buy-btn-copy" v-bind:class="[copyTklStatus ? 'active' : '','']" @tap="copyShareTklWenAn()">{{copyTklStatus?"复制成功":"一键复制"}}</view>
				</view>
			</simpleModal>
			<!-- 淘口令购买 -->
		</view>
		<view class="" v-if="!loadGoods">
			<view class="s-page">
				<view class="is-100vh is-flex is-column is-justify-center is-align-center ">
					<image
						src="../../static/img/load.gif"
						style="width:75px;height: 75px;"
						class="is-response"
						mode="widthFix"
					></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import simpleModal from '@/components/simple-pro/customModal.vue';
export default {
	data() {
		return {
			itemid: '',
			loadGoods: false,
			goods: [],
			shopCartBg:false,
			scrollTop:false,
			navBarButton:false,
			copyTklStatus:true,
			
			tkl:'',	//淘口令
			linkUrl:'',//转链链接
			loading: true,
			detailData: {},
		};
	},

	
	components:{
		simpleModal
	},
	
	onShow:function(){
		this.copyTklStatus = false;	
	},
	
	//接受传递的商品数据，没有则返回
	onLoad(options){
		
		if (options.data) {
			this.goods = JSON.parse(options.data);
			this.loadGoodsInfo();
			this.getTkl();
			
			//缓存商品ID
			uni.setStorage({
				key: 'guessItemId',
				data: this.goods.itemId,
				success: function () {
					
				}
			});
			
		} else {
			uni.navigateBack();
		}
	},
	
	onPageScroll:function(e){
		if(e.scrollTop > 200 ){
			this.scrollTop = true;
		}else{
			this.scrollTop = false; 
		}
	},
	onNavigationBarButtonTap:function(){
		this.navBarButton = !this.navBarButton; 
	},
	methods: {
		//处理商品数据
		loadGoodsInfo: function() {
			
			if (this.goods) {
				let goods = this.goods;
				
				//处理轮播图
				let mainImages = [];
				mainImages = goods.smallImages.split('|');
				goods.mainImages = [];
				mainImages.forEach(function (item, index) {
					goods.mainImages.push(item+'_400x400');
				});
				
				//处理商品详情
				let content = [];
				content = goods.content.split('|');
				goods.content = [];
				content.forEach(function (item, index) {
					if(item.indexOf("assets.alicdn.com") == -1){
							goods.content.push(item);
					}
					
				});
				
				if(goods.userType==0){
					goods.userType = '淘宝';
				}else{
					goods.userType = '天猫';
				}
				
				this.goods = goods;
				
				this.loadGoods = true;
			} else { 
				uni.navigateBack();
			}
			
		},
		moveHandleStop:function(){
			console.log("111")
		},
		showShopCartBg:function(type){
			if(type == "cart") {
				this.shopCartBg = !this.shopCartBg;
			}
			if(type == "nav") {
				this.navBarButton = !this.navBarButton;
			}	
		},
		topScrollTap:function(){
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		navBarButtontO:function(type){
			console.log(type);
		},
		shopCartShare:function(type){
			this.getTkl();
			// tkl = 淘口令  picture = 图片
			if(type == "tkl"){
				this.showShopCartBg("cart"); // 隐藏弹出的内容
				this.copyTklStatus = false;
				this.$refs.simpleModalTkl.show({
					showConfirmButton:false,
				}); 
			}else if(type == "tklbuy"){
				// 淘口令购买
				this.copyTklStatus = false;
				this.$refs.simpleModalTklBuy.show({
					showConfirmButton:false,
				}); 
			}
		},
		
		//通过接口生成淘口令
		getTkl:function(){
			if(this.tkl == ''){
				uni.request({
				
					url: 'http://ss.boyayun.cc/mobile/api/z_link?itemid='+this.goods.itemId, 
				
					success: (res) => {
						if (res.statusCode == 200) {
							let data = res.data;
							this.tkl = data.tkl;
							this.linkUrl = data.linkUrl;
						}
					}
				});	
			}
			
		},
		
		TklmaskClose:function(e){
			this.$refs.simpleModalTkl.hide();
			this.copyTklStatus = false;
		},
		//淘口令文案（分享）
		copyShareTklWenAn:function(){
			// uni.navigateTo({
			// 	url: 'https://t.asczwa.com/taobao?backurl='+this.tkl,
			// 	success: res => {},
			// 	fail: () => {},
			// 	complete: () => {}
			// });
			// window.location.href = 'https://t.asczwa.com/taobao?backurl=' + this.linkUrl
			uni.setClipboardData({
				data:'复制框内整段文字，打开【手淘APP】即可领券购买。'+this.tkl,
				success:(r=>{
					this.copyTklStatus = true;
				})
			})
		},
		
		//淘口令文案（购买）
		copyTklWenAn:function(){
			
			uni.setClipboardData({
				data:this.goods.title+'<br>'+'【原价】'+this.goods.itemfee+'元<br>【券后】'+this.goods.itemfeeFinal+'元<br>【复制此信息打开手机淘宝即可查看并下单】'+this.tkl+'<br>'+this.goods.jianjie,
				success:(r=>{
					this.copyTklStatus = true;
				})
			})
		},
		
		
		
		TklBuymaskClose:function(){
			this.$refs.simpleModalTklBuy.hide();
			this.copyTklStatus = false;
		}
	}
};
</script>

<style>
	
	@import '../../static/css/detail/detail.css';

page{
	background-color: white;
}

.swiper-container {
	min-height: 100vw;
}
.swiper-wrapper {
	width: 100%;
}
</style>
